<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">推荐详情</x-header>
    <div class="main-header" v-if="pageReady">
      <div class="process-detail-content">
        <div class="content-status" v-if="detail.status === 1">已否决</div>
        <div class="content-status" v-else-if="detail.status === 2">初审否决</div>
        <div class="content-status" v-else-if="detail.status === 3">已放款</div>
        <div class="content-status" v-else-if="detail.status === 4">申请中</div>
        <div class="content-status" v-else-if="detail.status === 5">初审通过</div>
        <div class="content-time">{{detail.createTime}}</div>
        <div class="content-detail" v-if="detail.status === 1">很抱歉，该客户未能通过平台初审，期待您的下次进件。</div>
        <div class="content-detail" v-if="detail.status === 2">很抱歉，该客户未能通过平台初审，期待您的下次进件。</div>
        <div class="content-detail" v-if="detail.status === 3">该客户已通过贷款审批，放款金额：¥{{detail.loanAmount}}感谢您的本次推荐，期待您的下次进件。</div>
        <div class="content-detail" v-if="detail.status === 4"></div>
        <div class="content-detail" v-if="detail.status === 5">该客户已经通过平台初审。</div>
      </div>
      <div class="process-detail-customer">
        <div class="customer-label">客户信息</div>
        <div class="customer-row margin-bot">
          <div class="customer-title">客户姓名</div>
          <div class="customer-content">{{detail.applyName}}</div>
        </div>
        <div class="customer-row margin-bot">
          <div class="customer-title">身份证号</div>
          <div class="customer-content">{{detail.IDNumber}}</div>
        </div>
        <div class="customer-row">
          <div class="customer-title">手机</div>
          <div class="customer-content">{{detail.applyMobile}}</div>
        </div>
      </div>
      <div class="button">
        <x-button class="button-link" @click.native="contact">联系客户</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { progressQueryDetail } from '@/api/home'

export default {
  name: 'processDetail',
  data () {
    return {
      detail: {},
      pageReady: false
    }
  },
  methods: {
    contact () {
      window.location.href=`tel:${this.detail.applyMobile}`
    }
  },
  mounted () {
    progressQueryDetail(this.$route.query.id).then( data => {
      this.detail = data
      this.pageReady = true
    })
  }
}
</script>

<style scoped>
.button {
  width: 70%;
  margin: 0 auto;
}
.button-link {
  background: #F14E2C;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 3rem;
}
</style>
